import { Form, Link, redirect, useFetcher, useRouteLoaderData } from "react-router";

import type { Route } from "./+types/logout";
import { signout } from "./auth";
import { Button } from "~/aria/Button";
import { LogOut } from "lucide-react";

export async function clientAction({
    request,
}: Route.ActionArgs) {
    await signout();
    return redirect("/");
}

export function AuthStatus() {
    // Get our logged in user, if they exist, from the root route loader data
    let fetcher = useFetcher();


    let isLoggingOut = fetcher.formData != null;

    return (
        <div className="flex">
            {/* <p>welcome !</p> */}
            <fetcher.Form method="post" action="/logout">
                <Button variant="icon" type="submit" isDisabled={isLoggingOut}>
                    <LogOut />
                    <span>
                        {isLoggingOut ? "退出中..." : ""}
                    </span>
                </Button>
            </fetcher.Form>
        </div>
    );
}